<template>
  <div class="merc-tabs" style="height:390px ;">
    <el-tabs type="border-card" style="
          min-height: 370px;
          box-shadow: none;
          border-bottom: 0;
          border-top: 1px solid #eee;
        ">
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-s-goods" style="color: rgb(17, 0, 255);"></i> 原料</span>
        </template>
        <!-- :defaultLoadPage="false"打开窗口禁用默认加载数据 -->
        <merc-table ref="table1" :clickEdit="true" :loadKey="true" :columns="tableColumns" :ck="false"
        :height="295" :rows="data1.length" :tableData="data1" :index="true" :defaultLoadPage="false" ></merc-table>
      </el-tab-pane>

      <!-- 从表2 -->
      <el-tab-pane :lazy="false">
        <template #label>
          <span><i class="el-icon-orange" style="color: greenyellow;"></i> 合金</span>
        </template>  
        <merc-table ref="table2" :clickEdit="true" :loadKey="true" :columns="tableColumns" :ck="false"
          :height="295" :tableData="data2"  :index="true" :defaultLoadPage="false" ></merc-table>
      </el-tab-pane>
      <el-tab-pane :lazy="false">
        <template #label>
          <span><i class="el-icon-delete-solid" style="color: red;"></i> 返回料</span>
        </template>        
        <merc-table ref="table1" :clickEdit="true" :loadKey="true" :columns="tableColumns" :ck="false"
          :height="295" :tableData="data3" :index="true" :defaultLoadPage="false" ></merc-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
//开发一对多从表需要参照voltable与viewgrid组件api
import MercTable from "@/components/basic/MercTable.vue";
import _ from 'lodash';
export default {
  components: { MercTable },
  data() {
    return {
      data:[],
      currentData:[],
      //表配置的字段注意要与后台返回的查询字段大小写一致
      tableColumns: [{ field: 'Id', title: '主键', type: 'string', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
      { field: 'MRId', title: '领料单ID', type: 'string', width: 110, hidden: true, align: 'left' },
      { field: 'MaterialId', title: '物料ID', type: 'string', width: 110, hidden: true, readonly: true, edit: { type: '' }, align: 'left' },
      { field: 'MaterialName', title: '物料名称', type: 'string', width: 110, readonly: true, edit: { type: '' }, align: 'left', sort: true },
      { field: 'BatchNumber', title: '批次号（炉号）', type: 'string', width: 110, readonly: true, edit: { type: '' }, align: 'left' },
      { field: 'RequiredWeight', title: '需求数量', type: 'string', width: 110, edit: { type: '' }, align: 'left' },
      { field: 'DeliveryWeight', title: '送达重量', type: 'string', width: 110,readonly: true, edit: { type: '' }, align: 'left' },
      { field: 'Notes', title: '备注', type: 'string', width: 220, edit: { type: 'textarea' }, align: 'left' }],
      //从表2
      data2:[
      ],
      data3:[]
    };
  },
  computed:{
    data1(){
       return this.data.filter(c=>c.Catefory == 1);
    },
    data2(){
       return this.data.filter(c=>c.Catefory == 0);
    },
    data3(){
       return this.data.filter(c=>c.Catefory == 2);
    }
  },
  methods: {
    //如果要获取页面的参数请使用 this.$emit("parentCall",见下面的使用方法
    modelOpen() {
      let $parent;
      //获取生成页面viewgrid的对象
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });


      let id = $parent.currentRow.Id;
      let param = {};
      param.value = id;
      param.page = 1;
      param.rows = 100;
      this.http.post('api/MaterialRequisition/GetDetailPage', param, true)
      .then((x) => {
        if (!x.rows) return this.$message.error(x.message);
        this.data = x.rows;
        this.currentData = _.cloneDeep(x.rows);
      });


      //当前如果是新建重置两个表格数据
      if ($parent.currentAction == "Add") {
        this.$refs.table1.reset();
        this.$refs.table2.reset();
      } else {
        //如果是编辑，添加两个表格的数据
        this.$refs.table1.load();
        //this.$refs.table2.load();
      }
    },
    loadTableBefore1(param, callBack) {
      let $parent = null;
      //当前是子页面，获取查询viewgrid页面的对象()
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });
      //如果是新建功能，禁止刷新操作
      if ($parent.currentAction == "Add") {
        return callBack(false);
      }
      //获取当前编辑主键id值
      let id = $parent.currentRow.Id;
      //添加从表的查询参数(条件)
      //将当前选中的行主键传到后台用于查询(后台在GetTable2Data(PageDataOptions loadData)会接收到此参数)
      param.value = id;
      //param.wheres.push({ name: "Id", value: id });
      callBack(true);
    },
    //从表2加载数据数前(操作与上面一样的,增加查询条件)
    loadTableBefore2(param, callBack) {
      callBack(true);
    },
    //从后台加载从表1数据后
    loadTableAfter1(data, callBack) {
      //this.$refs.table2.rowData = data;
      return true;
    },


    del() {
      let rows = this.$refs.table1.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$refs.table1.delRow();
      //可以this.http.post调用后台实际执行查询
    },
    clear() {
      this.$refs.table1.reset();
    },
    add() {
      //  this.$refs.table1.addRow({});
      this.$refs.table1.rowData.unshift({ title: "测试....." });
    },
    getRows() {
      //获取选中的行
      let rows = this.$refs.table1.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$Message.error(JSON.stringify(rows));
    },
  },
};
</script>
<style lang="less" scoped>
.merc-tabs {
  background: white;
}
</style>
  